<template>
	<div class="code-dialog">
    <van-popup
      v-model="dialogVisible"
      class="code-pop"
    >
    <div class="code-wrap">
      <div class="code-wrap-close" v-if="dialogVisible"  @click.stop="closeDialog">
        <img src="https://img.wifenxiao.com/h5-wfx/images/activity/icon_close.png" alt="">
      </div>
      <!-- 定制 如果有定制的海报图 设置海报图先显示 -->
      <template v-if="item_poster.length>0">
        <template v-if="tabIndex>=0">
          <img :src="poster" alt="" class="item_qrcode_one">
        </template>
        <template v-else>
          <img :src="codeData" alt="" class="item_qrcode" :class="(isCustomPoster == 1 || isPosterShow == 0) && codeType != 1 ? 'item_he8':''">
        </template>
      </template>
      <template v-else>
      <img :src="codeData" alt="" class="item_qrcode" :class="(isCustomPoster == 1 || isPosterShow == 0) ? 'item_he8':''">
      </template>
      <!-- 定制 设置海报图 切换下一张 start-->
      <div class="code-switch-tab" v-if="item_poster.length>0">
        <div class="next-img" @click.stop="switchTab"><img src="https://img.wifenxiao.com/h5-wfx/images/DZ/hbsz/changeIcon.png" />切换海报</div>
      </div>
      <!-- 定制 设置海报图 切换下一张 end-->
    </div>

    <van-button v-if="codeData || item_poster.length>0" class="btn" round plain block text="保存图片" @click="saveImg()"></van-button>
    </van-popup>
  </div>
</template>

<script>
import Vue from 'vue'
import small from '@/smallapp/small'
  export default Vue.extend({
    name: 'index',
    props: {
      visible: {
        type: Boolean,
        default: false
      },
      isPosterShow: { // 新版海报 0 不是 1 是
        type: [String, Number],
        default: 0
      },
      isCustomPoster: { // 是否是自定义海报 0 不是 1 是
        type: [String, Number],
        default: 0
      },
      codeData: '',
      item_poster: {
        type: Array,
        default() {
          return []
        }
      }
    },
    data() {
      return {
        dialogVisible: false,
        tabIndex: 0,
        poster: ''
      }
    },
    mounted() {
      this.dialogVisible = this.visible
    },
    watch: {
      item_poster(val) {
        if (val.length > 0) {
          this.poster = this.item_poster[0]
        }
      },
      dialogVisible(val) {
        this.$emit('update:visible', val)
      },
      visible(val) {
        this.dialogVisible = val
      }
    },
    methods: {
      saveImg () {
        if (this.item_poster.length > 0) {
          small.saveImage(this.poster)
        } else {
          small.saveImage(this.codeData)
        }
      },
      // 点击关闭按钮
      closeDialog() {
        this.dialogVisible = false
        // 定制 多张分享海报 重置 index
        if (this.item_poster.length > 0) {
          this.tabIndex = 0
          this.poster = this.item_poster[this.tabIndex]
        }
      },
      // 定制 点击切换按钮
      switchTab() {
        if (this.tabIndex < this.item_poster.length - 1) {
          this.tabIndex++
          this.poster = this.item_poster[this.tabIndex]
        } else {
          this.tabIndex = -1
          this.poster = this.codeData
        }
      }
    }
  })
</script>

<style lang="scss">
  @import "src/styles/mixin";
  @import "src/styles/variables";
  .code-dialog{
    background: #fff;
    position: relative;
    .code-pop{
      background-color: transparent;
      .btn{
        width: 80%;
        margin: 10px 10% 20px;
        height:76px;
        font-size:28px;
        border-color: #fff;
        color: #fff;
        background-color: transparent;
      }
    }
    .code-wrap{
      position: relative;
      padding:22px;
      .code-wrap-close{
        position: absolute;
        right: 0;
        top: 0;
        width: 60px;
        height: 60px;
        z-index: 2021;
        img{
          max-width: 100%;
          width: 100%;
        }
      }
      .code-switch-tab {
        // position: absolute;
        // right: 0;
        // top: 50%;
        // width: 60px;
        // height: 60px;
        // z-index: 2021;
        // img{
        //   max-width: 100%;
        //   width: 100%;
        // }
        text-align: center;
        margin-top: 40px;
        .next-img {
          display: flex;
          justify-content: center;
          align-items: center;
          color: #fff;
          font-size: 36px;
          img {
            width: 40px;
            margin-right: 16px;
          }
        }
      }
      .item_qrcode{
        display:block;
        width:100%;
        max-height:1100px;
        border-radius:20px;
        // &.item_he8 {
        //   height: 800px !important;
        // }
      }
      .item_qrcode_one {
        display:block;
        // width: 672px;
        // height: 900px;
        // height: 800px;
        max-height:1000px;
        object-fit: contain;
        border-radius:20px;
      }
    }
  }
</style>
